<template>
	<view class="page">
		<view style="background: -webkit-linear-gradient(top,#ffeeee,#FFFFFF);">
			<view class="nav-title-wrapper">
				<view class="nav-title">我的</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 44upx;
			align-items: center;padding: 0 30upx;">

				<view style="display: flex;flex-direction: row;align-items: center;" @click="login" v-if="isLogin">
					<image style="width: 104upx;height: 104upx;border-radius: 104upx;" :src="userInfo.avatar" mode=""
						@click="toMineUserInfo"></image>
					<view style="display: flex;flex-direction: column;margin-left: 20upx;" @click="toMineUserInfo">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<view style="font-weight: bold;color: #191919;
						font-size: 36upx;white-space: nowrap;overflow: hidden;
						text-overflow: ellipsis;">{{userInfo.nickname}}</view>

							<image v-if="userInfo.isTechAuth===2" style="width: 40upx;height: 40upx;margin-left: 12upx;"
								src="../../static/images/tech-auth-icon.png" mode=""></image>
						</view>
						<view style="font-size: 24upx;color: #A6A6A6;" v-if="userInfo.mobile !==null ">
							{{userInfo.mobile}}
						</view>
					</view>
				</view>

				<view style="display: flex;flex-direction: row;align-items: center;" @click="login" v-else>
					<image style="width: 104upx;height: 104upx;" src="../../static/images/default-avatar.png" mode="">
					</image>
					<view style="display: flex;flex-direction: column;margin-left: 20upx;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<view style="font-weight: bold;color: #191919;
							font-size: 36upx;white-space: nowrap;overflow: hidden;
							text-overflow: ellipsis;">欢迎登录威客字节</view>
						</view>
					</view>
				</view>
				<view @click="toMineUserInfo">
					<image style="width: 28upx;height: 28upx;" src="../../static/images/right-avatar-icon.png" mode="">
					</image>
				</view>

			</view>
		</view>


		<view style="margin-top: 64upx;margin-left: 32upx;margin-right: 32upx;">
			<view style="font-weight: bold;font-size: 30upx;color: #191919;">我的交易</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 32upx;">
				<view style="display: flex;flex-direction: column;align-items: center;margin-left: 120upx;"
					@click="toDemandOrder">
					<image style="width: 56upx;height: 56upx;" src="../../static/images/demand-order-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 24upx;margin-top: 10upx;">我的订单</span>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;margin-right: 120upx;"
					@click="toMineTakingOrder">
					<image style="width: 56upx;height: 56upx;" src="../../static/images/mine-demand-order-icon.png"
						mode=""></image>
					<span style="color: #191919;font-size: 24upx;margin-top: 10upx;">我的接单</span>
				</view>

			</view>
		</view>

		<view style="width: 100%;height: 16upx;background: #FAFAFA;margin-top: 32upx;"></view>

		<view style="margin-top: 32upx;margin-left: 32upx;margin-right: 32upx;align-items: center;">
			<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<view style="font-weight: bold;font-size: 30upx;color: #191919;">我的钱包</view>
				<image style="width: 28upx;height: 28upx;" src="../../static/images/right-avatar-icon.png" mode="">
				</image>
			</view>


			<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 34upx;margin-right: 120upx;
			margin-left: 120upx;" v-if="isLogin">
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinewallet(1)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">{{userInfo.totalIncome}}.00</view>
					<view style="font-size: 24upx;color: 191919;">余额(元)</view>
				</view>

				<view style="width: 0;height: 32upx;border: 2upx solid #EDEDED;margin-top: 10upx;"></view>

				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinewallet(2)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">{{userInfo.estimateIncome}}.00
					</view>
					<view style="font-size: 24upx;color: 191919;">预计入账</view>
				</view>

			</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 34upx;margin-right: 120upx;
			margin-left: 120upx;" v-else>
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinewallet(1)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">0.00</view>
					<view style="font-size: 24upx;color: 191919;">余额(元)</view>
				</view>

				<view style="width: 0;height: 32upx;border: 2upx solid #EDEDED;margin-top: 10upx;"></view>

				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinewallet(2)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">0.00</view>
					<view style="font-size: 24upx;color: 191919;">预计入账</view>
				</view>

			</view>


		</view>


		<view style="width: 100%;height: 16upx;background: #FAFAFA;margin-top: 32upx;"></view>

		<view style="margin-top: 32upx;margin-left: 32upx;margin-right: 32upx;align-items: center;">
			<view style="font-weight: bold;font-size: 30upx;color: #191919;">我的发布</view>

			<view
				style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 34upx;margin-right: 116upx;margin-left: 116upx;"
				v-if="isLogin">
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinePublish(1)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">{{userInfo.demandCount}}</view>
					<view style="font-size: 24upx;color: 191919;">我发布的需求</view>
				</view>

				<view style="width: 0;height: 32upx;border: 2upx solid #EDEDED;margin-top: 10upx;"></view>

				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinePublish(2)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">{{userInfo.codeCount}}</view>
					<view style="font-size: 24upx;color: 191919;">我发布的源码</view>
				</view>

			</view>


			<view
				style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 34upx;margin-right: 116upx;margin-left: 116upx;"
				v-else>
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinePublish(1)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">0</view>
					<view style="font-size: 24upx;color: 191919;">我发布的需求</view>
				</view>

				<view style="width: 0;height: 32upx;border: 2upx solid #EDEDED;margin-top: 10upx;"></view>

				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMinePublish(2)">
					<view style="font-size: 40upx;font-weight: bold;color: 191919;">0</view>
					<view style="font-size: 24upx;color: 191919;">我发布的源码</view>
				</view>

			</view>

		</view>

		<view style="width: 100%;height: 16upx;background: #FAFAFA;margin-top: 32upx;"></view>

		<view style="margin-top: 64upx;margin-left: 46upx;margin-right: 46upx;">
			<view style="font-weight: bold;font-size: 30upx;color: #191919;">我的服务</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 32upx;">

				<view style="display: flex;flex-direction: column;align-items: center;" @click="toMineUserInfo">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/user-info-icon.png" mode="">
					</image>
					<view style="font-size: 24upx;color: #191919;margin-top: 14upx;">个人资料</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toTechAuth">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/tech-coficate-icon.png" mode="">
					</image>
					<view style="font-size: 24upx;color: #191919;margin-top: 14upx;">技术认证</view>
				</view>
				<!-- <view style="display: flex;flex-direction: column;align-items: center;">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/concat-customer-icon.png" mode=""></image>
					<view style="font-size: 24upx;color: #191919;margin-top: 14upx;">联系客服</view>
				</view> -->
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toPlatformIntructions">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/platform-notify-icon.png"
						mode=""></image>
					<view style="font-size: 24upx;color: #191919;margin-top: 14upx;">平台须知</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;" @click="toFeedback">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/feedback-icon.png" mode="">
					</image>
					<view style="font-size: 24upx;color: #191919;margin-top: 14upx;">意见反馈</view>
				</view>



			</view>

			<view style="margin-top: 32upx;display: flex;flex-direction: row;">

				<view style="display: flex;flex-direction: column;align-items: center;" @click="toAbout">
					<image style="width: 48upx;height: 48upx;" src="../../static/images/about-our-icon.png" mode="">
					</image>
					<view style="font-size: 24upx;color: #191919;margin-top: 14upx;">关于我们</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		get
	} from '../../utils/local.js'
	import {
		user_info,
		login_code
	} from '../../api/mine/auth.js'
	import {
		set
	} from '../../utils/local.js'
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {}
			}
		},
		mounted() {
			this.getUserInfo()
		},
		onShow() {
			this.login()
			this.getUserInfo()
		},
		onPullDownRefresh() {
			this.getUserInfo()
		},


		methods: {
			
			toPlatformIntructions(){
				uni.navigateTo({
					url:'../platform-instructions/platform-instructions'
				})
			},

			toTechAuth() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../tech-auth/tech-auth'
					})
				} else {
					this.login()
				}

			},

			toMineTakingOrder() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../mine-taking-order/mine-taking-order'
					})
				} else {
					this.login()
				}

			},
			toDemandOrder() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../demand-order/demand-order'
					})
				} else {
					this.login()
				}

			},
			getUserInfo() {
				let token = get('token')
				console.log("token:" + token)
				if (token) {
					this.isLogin = true
					user_info().then(res => {
						console.log(res)
						this.userInfo = res.data
						set('userInfo', JSON.stringify(res.data))
					})

				}else{
					this.isLogin=false
					this.userInfo={}
				}

			},
			toMinewallet(type) {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../mine-wallet/mine-wallet?type=' + type
					})
				} else {
					this.login()
				}

			},
			login() {

				if (this.isLogin) {
					return
				}
				var that = this;
				let code = '';
				uni.login({
					provider: "weixin",
					success(res) {
						code = res.code
					}
				})
				uni.getUserProfile({
					provider: 'weixin',
					lang: 'zh_CN',
					desc: "用于获取用户信息",
					success: (result) => {
						console.log(result.userInfo)
						let params = {}
						params.code = code;
						params.wxUserInfoRequest = result.userInfo;
						login_code(params).then(res => {
							console.log(res.data)
							set('token', res.data)
							that.getUserInfo()
							setTimeout(function() {
								uni.navigateTo({
									url: '../login/login'
								})
							}, 200)
						})
					}
				})
			},

			toFeedback() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../feedback/feedback'
					})
				} else {
					this.login()
				}

			},
			toLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '../login/login'
					})
				}

			},
			toMineUserInfo() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../user-info/user-info'
					})
				} else {
					this.login()
				}

			},
			toAbout() {
				uni.navigateTo({
					url: '../about/about'
				})
			},
			toMinePublish(code) {
				if (this.isLogin) {
					uni.navigateTo({
						url: '../mine-publish/mine-publish?code=' + code
					})
				} else {
					this.login()
				}

			}
		}
	}
</script>

<style>
	.page {
		background: #FFFFFF;
	}


	.nav-title-wrapper {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: relative;


	}

	.nav-title {
		color: #191919;
		font-size: 34upx;
		font-weight: bold;
		margin-top: 104upx;
	}
</style>
